<template>
  <div class="section user-section">
    <div class="head">
      <van-nav-bar class="nav-bar">
        <template #left>
          <van-icon name="arrow-left" @click="router.go(-1)" />
        </template>

        <template #title>
          <div class="title">个人信息</div>
        </template>
      </van-nav-bar>
    </div>

    <div class="body">
      <yu-card class="user-info-card">
        <template v-if="!isEdit" #body>
          <list class="user-info-list">
            <template #left>真实姓名</template>
            <template #right>
              <div>{{ formState.name }}</div>
            </template>
          </list>

          <list class="user-info-list">
            <template #left>班级</template>
            <template #right>
              <div>
                {{ formState.classNum }}
              </div>
            </template>
          </list>

          <list class="user-info-list">
            <template #left>学号</template>
            <template #right>
              <div>
                {{ formState.stuNum }}
              </div>
            </template>
          </list>
          <list class="user-info-list">
            <template #left>手机号</template>
            <template #right>
              <div>
                {{ formState.phone }}
              </div>
            </template>
          </list>
          <list class="user-info-list">
            <template #left>所在支部</template>
            <template #right>
              <div>
                {{ formState.branch }}
              </div>
            </template>
          </list>
          <list class="user-info-list">
            <template #left>目前是</template>
            <template #right>
              <div>
                {{ formState.userType }}
              </div>
            </template>
          </list>
          <template v-if="formState.userType != '正式党员'">
            <list class="user-info-list">
              <template #left>培养联系人1</template>
              <template #right>
                <div>
                  {{ formState.devPeo1 }}
                </div>
              </template>
            </list>
            <list class="user-info-list">
              <template #left>培养联系人2</template>
              <template #right>
                <div>
                  {{ formState.devPeo2 }}
                </div>
              </template>
            </list>
          </template>
          <yu-card class="user-info-card">
            <template #body>
              <list class="user-info-list">
                <template #center>
                  <div @click="editInfo">编辑个人资料</div>
                </template>
              </list>
            </template>
          </yu-card>
        </template>
      </yu-card>

      <yu-card class="user-info-card">
        <template v-if="isEdit" #body>
          <van-form @submit="onSubmit" style="padding-bottom: 5px">
            <van-cell-group inset>
              <van-field
                class="user-info-list"
                v-model="formState.name"
                name="name"
                label="姓名"
                placeholder="请填写真实姓名"
                :rules="rules.name"
              />
              <van-field
                class="user-info-list"
                v-model="formState.classNum"
                name="classNum"
                label="班级"
                placeholder="请填写班级"
                :rules="rules.classNum"
              />
              <van-field
                class="user-info-list"
                v-model="formState.stuNum"
                name="stuNum"
                label="学号"
                placeholder="请填写学号"
                :rules="rules.stuNum"
              />
              <van-field
                class="user-info-list"
                v-model="formState.phone"
                name="phone"
                label="手机号"
                placeholder="请填写手机号"
                :rules="rules.phone"
              />
              <van-field
                v-model="formState.branch"
                is-link
                readonly
                name="branch"
                label="所在支部"
                placeholder="点击选择支部"
                @click="showBranch = true"
                :rules="rules.branch"
              />
              <van-popup v-model:show="showBranch" position="bottom">
                <van-picker
                  :columns="branchs"
                  @confirm="onConfirm"
                  @cancel="showBranch = false"
                />
              </van-popup>
              <van-field name="userType" label="身份" :rules="rules.userType">
                <template #input>
                  <van-radio-group
                    v-model="formState.userType"
                    direction="horizontal"
                  >
                    <van-radio name="正式党员">正式党员</van-radio>
                    <van-radio name="预备党员">预备党员</van-radio>
                    <van-radio name="积极分子">积极分子</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <template v-if="type === 0">
                <van-field
                  v-model="formState.devPeo1"
                  is-link
                  readonly
                  name="devPeo1"
                  label="请选择第一培养人"
                  placeholder="点击选择"
                  :rules="rules.devpeo1"
                  @click="showDevPeo1 = true"
                />
                <van-popup v-model:show="showDevPeo1" position="bottom">
                  <van-picker
                    :loading="state.loading"
                    :columns="state.dylist"
                    @confirm="onConfirmDevPeo1"
                    @cancel="showDevPeo1 = false"
                  />
                </van-popup>
                <van-field
                  v-model="formState.devPeo2"
                  is-link
                  readonly
                  name="devPeo2"
                  label="请选择第二培养人"
                  :rules="rules.devpeo2"
                  placeholder="点击选择"
                  @click="showDevPeo2 = true"
                />
                <van-popup v-model:show="showDevPeo2" position="bottom">
                  <van-picker
                    :loading="state.loading"
                    :columns="state.dylist"
                    @confirm="onConfirmDevPeo2"
                    @cancel="showDevPeo2 = false"
                  />
                </van-popup>
              </template>
            </van-cell-group>
            <div style="margin: 8px">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
        </template>
      </yu-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import toasts from "/@/views/components/toasts";
import { useStore } from "vuex";
import { updateZSDY, getDY, updateOther } from "/@/api/user";
import {
  validPhone,
  validName,
  validStuNum,
  validClassNum,
} from "/@/utils/validate";
import YuCard from "/@/components/YuCard";
import list from "/@/views/components/list/index.vue";
import bg1 from "/@/assets/imgs/bg-img1.png";
import bg2 from "/@/assets/imgs/bg-img2.png";
const router = useRouter();
const route = useRoute();
const store = useStore();

const branchs = [
  "通一党支部",
  "通二党支部",
  "通三党支部",
  "电一党支部",
  "电二党支部",
  "电三党支部",
  "研究生第一党支部",
  "研究生第二党支部",
  "研究生第三党支部",
];

//培养联系人列表为异步获取，因此需要使用响应式数据
const state = reactive({
  dylist: [],
  loading: true,
});

const showBranch = ref(false);
const trigger = "onBlur"; // onChange
var token = store.state.storage.user.token; //用于区分用户
var user = store.state.storage.user;
var type = ref(1); //1代表正式党员

var showDevPeo1 = ref(false);

var showDevPeo2 = ref(false);

var userInfo = JSON.parse(window.localStorage.getItem("USER_INFO")); //获取本地存储数据

const formState = reactive({
  name: user.userInfo.name ? user.userInfo.name : "",
  classNum: user.userInfo.classNum ? user.userInfo.classNum : "",
  stuNum: user.userInfo.stuNum ? user.userInfo.stuNum : "",
  gender: user.userInfo.gender ? user.userInfo.gender : "",
  phone: user.userInfo.phone ? user.userInfo.phone : "",
  branch: user.userInfo.branch ? user.userInfo.branch : "",
  userType: user.userInfo.userType ? user.userInfo.userType : "",
  devPeo1: user.userInfo.devPeo1 ? user.userInfo.devPeo1 : "",
  devPeo2: user.userInfo.devPeo2 ? user.userInfo.devPeo2 : "",
});
onMounted(() => {
  console.log("onMounted", store.state.storage, route.params);
  token = store.state.storage.user.token;
  user = store.state.storage.user;
  isEdit.value = Boolean(route.params.isEdit);
  const params = route.params
  if (params.fromWhere === 'check'){
    if(user.userInfo.userType !='正式党员'){
      type.value = 0
    }
  }
  
  
});

watch([() => formState.userType, () => formState.branch], (newValue) => {
  if (newValue[0] === "预备党员" || newValue[0] === "积极分子") {
    console.log("用户不是正式党员");
    type.value = 0; // 显示后两列
    getDY(
      {
        token: token,
        branch: newValue[1],
      },
      (res) => {
        if (res.code === 0) {
          console.log("成功获取党员名单");
          console.log(res);
          state.dylist = res.dylist;
          state.loading = false;
        }
      }
    );
  } else {
    type.value = 1;
  }
});
const checkClassNum = (value, rule) => {
  if (!value) return "请填写班级";
  if (!validClassNum(value)) return "请填写正确的班级如通信1801";
  return true;
};

const checkStuNum = (value, rule) => {
  if (!value) return "请填写学号";
  if (!validStuNum(value)) return "请填写正确的学号";
  return true;
};

const checkName = (value, rule) => {
  if (!value) return "请填写姓名！";
  if (!validName(value)) return "请填写正确的姓名";
  return true;
};

const checkPhone = (value, rule) => {
  if (!value) return "请填写手机号码！";
  if (!validPhone(value)) return "手机号格式不正确！";
  return true;
};

const devPeo1 = (value, rule) => {
  if (formState.userType != "正式党员") {
    if (!value) return "请选择培养联系人！";
  }
  return true;
};

const devPeo2 = (value, rule) => {
  if (formState.userType != "正式党员") {
    if (!value) return "请选择培养联系人！";
    if (value === formState.devPeo1) return "两个培养联系人不能一样";
  }
  return true;
};

const rules = {
  name: [{ validator: checkName, trigger }],
  stuNum: [{ validator: checkStuNum, trigger }],
  classNum: [{ validator: checkClassNum, trigger }],
  phone: [{ validator: checkPhone, trigger }],
  branch: [{ required: true, message: "请选择支部", trigger }],
  userType: [{ required: true, message: "请选择身份", trigger }],
  devpeo1: [{ validator: devPeo1, trigger }],
  devpeo2: [{ validator: devPeo2, trigger }],
};

var isEdit = ref(false);

const onConfirm = (value) => {
  formState.branch = value;
  showBranch.value = false;
};

const onConfirmDevPeo1 = (value) => {
  formState.devPeo1 = value;
  showDevPeo1.value = false;
};

const onConfirmDevPeo2 = (value) => {
  formState.devPeo2 = value;
  showDevPeo2.value = false;
};

function editInfo() {
  isEdit.value = true;
}

// 按钮提交事件
const onSubmit = async (values) => {
  console.log(values);
  isEdit.value = false;
  if (values.userType === "正式党员") {
    updateZSDY(
      {
        token: token,
        name: values.name,
        classNum: values.classNum,
        stuNum: values.stuNum,
        phone: values.phone,
        branch: values.branch,
        userType: values.userType,
      },
      (res) => {
        if (res.code === 0) {
          toasts.success("成功更新党员信息");
          userInfo.userInfo.token = token;
          userInfo.userInfo.name = values.name;
          userInfo.userInfo.classNum = values.classNum;
          userInfo.userInfo.stuNum = values.stuNum;
          userInfo.userInfo.phone = values.phone;
          userInfo.userInfo.branch = values.branch;
          userInfo.userInfo.userType = values.userType;
          store.commit("storage/setUser", userInfo);
          console.log(user);
        }
      }
    );
  } else {
    updateOther(
      {
        token: token,
        name: values.name,
        classNum: values.classNum,
        stuNum: values.stuNum,
        phone: values.phone,
        branch: values.branch,
        userType: values.userType,
        devPeo1: values.devPeo1,
        devPeo2: values.devPeo2,
      },
      (res) => {
        if (res.code === 0) {
          toasts.success("成功更新个人信息");
          userInfo.userInfo.token = token;
          userInfo.userInfo.name = values.name;
          userInfo.userInfo.classNum = values.classNum;
          userInfo.userInfo.stuNum = values.stuNum;
          userInfo.userInfo.phone = values.phone;
          userInfo.userInfo.branch = values.branch;
          userInfo.userInfo.userType = values.userType;
          userInfo.userInfo.devPeo1 = values.devPeo1;
          userInfo.userInfo.devPeo2 = values.devPeo2;
          store.commit("storage/setUser", userInfo);
        }
      }
    );
  }
};
</script>

<style lang="scss" scoped>
.user-section {
  background: var(--yu-gray-color--light);
  min-height: 100vh;

  .head {
    height: 50px;
    position: relative;
    .nav-bar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: var(--yu-linear-bg-color);
      border: none;
      .van-icon {
        color: var(--yu-white-color);
      }
      .title {
        color: var(--yu-white-color);
      }
      &:after {
        border: none;
      }
    }
    .head-bg {
      height: 150px;
      background: var(--yu-linear-bg-color);
      position: relative;
      overflow: hidden;
      width: 100%;
      img {
        display: inline-block;
        position: absolute;
        width: 80px;
        height: auto;
        opacity: 0.2;
        &.img1 {
          top: 0;
          right: 0;
        }
        &.img2 {
          bottom: 0;
          left: 0;
        }
      }
    }
  }

  .user-info {
    position: absolute;
    top: 66px;
    left: 13px;
    width: calc(100% - 26px);
    z-index: 9;
    .card-head-wrapper {
    }
    .card-body-wrapper {
      .avatar {
        width: 60px;
        height: 60px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 16px;
        box-shadow: var(--yu-border-shadow--light);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        color: rgba(36, 45, 61, 1);
        font-size: 12px;
        line-height: 18px;
        padding-top: 10px;
        text-align: left;
        width: calc(100% - 60px - 16px);
        .user-name {
          margin-bottom: 4px;
          font-weight: 600;
        }
        .phone {
        }
      }
    }
    .card-foot-wrapper {
    }
  }

  .body {
    padding: 0 13px;
    margin-top: 10px;
  }
  .user-info-card {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
  }
  .user-info-list {
    font-size: 15px;
  }
}
</style>